<template>
	<view class="content flex ali-cen wid1p" :class="theme === 'night' ? 'bg-black' : 'bg-White'">
		<view class="flex wid1p ali-cen just-spa-bet">
			<view class="commonInputBox flex ali-cen just-spa-bet" :class="theme === 'night' ? 'bg-night' : 'bg-dayTime'">
				<input
					ref="inputs"
					class="inputs ml50 paddtb20"
					type="text"
					:placeholder="placeholderTxt"
					v-model="contentTxt"
					:focus="isAutoFocus"
					adjust-position="false"
					@focus="inputFocus"
					@blur="inputBlur"
					cursor-spacing="10"
				/>
				<u-icon class="paddlr20" name="level" size="40" color="gray"></u-icon>
			</view>
			<view class="opteraBox flex ali-cen just-spa-aro ove-hide" :style="{ width: rightWid }" v-if="!OnlyInput">
				<view class="flex flex-col ali-cen" @click="$pub.Toast('功能开发中')">
					<u-icon class="paddlr20" name="share" size="40" :color="theme === 'night' ? 'white' : 'gray'"></u-icon>
					<text class="mt6">分享</text>
				</view>
				<view class="flex flex-col ali-cen" @click="$pub.Toast('功能开发中')">
					<u-icon class="paddlr20" name="star" size="40" :color="theme === 'night' ? 'white' : 'gray'"></u-icon>
					<text class="mt6">收藏</text>
				</view>
				<view class="flex flex-col ali-cen" @click="$pub.Toast('功能开发中')">
					<u-icon class="paddlr20" :name="ArticleDetail.iSlike ? 'thumb-up-fill' : 'thumb-up'" size="40" :color="theme === 'night' ? 'white' : 'gray'"></u-icon>
					<text class="mt6">点赞</text>
				</view>
			</view>

			<u-button v-if="inputState" class="btn ml20" shape="square" :ripple="true" @click="onPush">发布</u-button>
		</view>
	</view>
</template>

<script>
import { API$AddCommon } from '../../../common/API/community.js';
let timers;
export default {
	name: '',
	props: {
		/*
		@theme  主题
		 night 晚上（黑色）
		 dayTime 白天 （白色）
		*/
		theme: {
			type: String,
			default: 'dayTime'
		},
		articleId: {
			type: String,
			default: ''
		},
		OnlyInput: {
			type: Boolean,
			default(){
				return false
			}
		},
		SecondInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		ArticleDetail: {
			type: [Object, Array],
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			inputState: false, // 是否要处于发布状态
			isAutoFocus: false, // 是否自动聚焦
			rightWid: '300rpx',
			contentTxt: '',
			placeholderTxt: '写点评论...',
			parentId: '' //  指定被回复的评论ID
		};
	},
	onLoad() {
		uni.onKeyboardHeightChange(res => {
			if (res.height < 10) {
				this.inputState = false;
				this.rightWid = '300rpx';
			}
		});
	},
	methods: {
		inputFocus(Json) {
			/*
					@Json：{
						@_id:			这条评论的_id 做二级评论需要的    或者是    指定回复者的id(二级的)
						@Nickname:  	被回复的昵称
						@commonValue:	被回复的内容
					}
				*/
			console.warn(Json);
			this.isAutoFocus = true;
			this.inputState = true;
			this.rightWid = '0rpx';

			if (!Json._id) {
				// 1.一级评论
				let inputs = this.$refs.inputs;
				inputs.$el.click;
				
			}else if(Json._id && Json.parentId){
				
				// 3.二级评论的指定回复
				console.log('cc')
				// 这边的  	this.parentId 				是指楼主id
				// 这边的  	this.Second_appointed_id  	是指二级评论的下楼主下  指定回复二级评论的id
				this.placeholderTxt = '回复：' + Json.commonValue;
				this.parentId = Json.parentId;
				this.Second_appointed_id = Json._id
				this.reply_UseId = Json.reply_UseId
				
			}else {
				
				// 2.一级评论指定回复
				this.placeholderTxt = '回复：' + Json.commonValue;
				this.parentId = Json._id;
			}
		},
		inputBlur(e) {
			setTimeout(() => {
				this.inputState = false;
				this.rightWid = '300rpx';

				// 失去焦点置空 placeholderTxt和parentId
				this.placeholderTxt = '写点评论...';
				this.parentId = null;
				this.Second_appointed_id =null
				this.reply_UseId =null
				this.isAutoFocus = false;
			}, 100);
		},
		onPush() {
			this.inputState = false;
			this.rightWid = '300rpx';
			this.addCommon();
		},
		// 发布评论 （整合）
		async addCommon() {
			if (!this.SecondInfo._id) {
				// 1.一级评论发表处
				console.log('1.一级评论发表处')
				let SelJson = {
					articleId: this.articleId,
					UserId: this.$pub.getStorageSync('UserInfo')._id,
					commonValue: this.contentTxt
				};
				this.parentId ? (SelJson['parentId'] = this.parentId) : ''; // 有指定回复带上id
				let { code, msg , data } = await API$AddCommon(SelJson);
				if (code === 200) {
					this.$pub.Toast(msg);
					this.placeholderTxt = '写点评论...';
					this.contentTxt = '';
					
					this.$emit('changeCommonLenS', data)
					// this.$emit('FreshList');
				}
			} else {
				// 2.二级评论发表处
				console.log('2.二级评论发表处')
				console.log(this.SecondInfo);
				let SelJson = {
					articleId: this.SecondInfo.articleId,
					UserId: this.$pub.getStorageSync('UserInfo')._id,
					commonValue: this.contentTxt,
					parentId: this.SecondInfo._id
				};
				
				this.Second_appointed_id && this.reply_UseId ? (SelJson['Second_appointed_id'] = this.Second_appointed_id) : ''; // 有指定回复带上id
				this.Second_appointed_id && this.reply_UseId ? (SelJson['reply_UseId'] = this.reply_UseId) : ''; // 有指定回复带上id
				
				let { code, msg,data } = await API$AddCommon(SelJson);
				if (code === 200) {
					this.$pub.Toast(msg);
					this.placeholderTxt = '写点评论...';
					this.contentTxt = '';
					this.$emit('FreshList');
					this.$emit('changeSecondCommonLen',{id:this.SecondInfo._id,data});
				}
			}
		}
	}
};
</script>

<style scoped lang="less">
.content {
	position: fixed;
	bottom: 0;
	height: 140rpx;
	padding: 0 20rpx;
	z-index: 999;
}

.commonInputBox {
	background-color: #f1f1f1;
	border-radius: 50rpx;
	overflow: hidden;
	transition: 0.5s;
	flex: 1;
	padding: 6rpx 0;
}
.commonInputBox input {
	height: inherit;
	width: 80%;
	border: none;
	outline: none;
	background-color: inherit;
}

.opteraBox {
	transition: 0.5s;
}

.btn {
	/*  #ifdef H5 */

	line-height: 90rpx;
	/*  #endif  */
	/* #ifdef APP-PLUS */

	/*  #endif  */

	background-color: skyblue;
	color: #fff;
	border-radius: 100rpx;
}

// 主题设置
.bg-dayTime {
	background-color: #f1f1f1;
}
.bg-night {
	background-color: #575757;
	.uni-input-placeholder {
		color: #f1f1f1;
	}
}
</style>
